<template>
  <el-dialog
    width="760px"
    title="批量设置业务权限"
    :visible.sync="currentVisible"
  >
    <Display :multiple-selection="multipleSelection" tips="，请为其设置权限">
      <div class="flex space-x-3">
        <div>部门</div>
        <div>
          <el-select v-model="department" class="w-80" clearable>
            <el-option v-for="item in options" :key="item.id" :value="item.id">
              <div
                :style="{
                  'padding-left': `${(item.level - 2) * 32}px`,
                }"
              >
                <i v-if="item.level === 2" class="el-icon-caret-bottom"></i>
                {{ item.label }}
              </div>
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="text-center mt-8">
        <el-button @click="currentVisible = false">取消</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </Display>
  </el-dialog>
</template>

<script lang="ts">
// @ts-nocheck
import Vue from 'vue'
import { mapGetters } from 'vuex'
import BatchDialogMixin from './BatchDialogMixin'
import Display from './Display.vue'
export default Vue.extend({
  components: {
    Display,
  },
  // @ts-ignore
  mixins: [BatchDialogMixin],
  data() {
    return {
      department: [],
      // options: [],
    }
  },
  computed: {
    ...mapGetters('system', ['flatDepartments']),
    options() {
      return this.flatDepartments.filter((x) => x.level !== 1)
    },
  },
})
</script>
<style></style>
